<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-1.12.4.js"></script>
</head>

<body>
    <h1>JSON遍历示例</h1>
    <ul id="output"></ul>

    <h2>请输入一个qq号码</h2>
    <input type="text" id="text" />
    <input type="button" value="获取qq头像" id="btn">
    <script>
        $("#btn").click(function () {
            let a = $("#text").val();
            let reg = /^[1-9]\d{4,10}$/;
            if (reg.test(a) == false) {
                alert("输入错误，请重新输入")
                return false;
            } else {
                //1.创建XMLHttpRequest对象
                if (window.XMLHttpRequest) {//返回值为true时说明是新版本IE或其他浏览器
                    xhr = new XMLHttpRequest();
                } else {//返回值为false时说明是老版本IE浏览器（IE 5和IE 6）
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xhr.onreadystatechange = callBack;
                let url = "https://api.qqsuu.cn/api/dm-qt?qq=" + a;
                xhr.open("GET", url, true);
                xhr.send(null);

                function callBack() {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        // 获取响应数据
                        var image = xhr.response;

                        // 创建一个图片元素
                        var img = document.createElement('img');

                        // 将获取到的图片数据作为数据URL设置到图片元素的 src 属性
                        img.src = url;
                        // img.setAttribute("src","url")

                        // 将图片元素添加到文档中
                        document.body.appendChild(img);

                    }
                }

            }


        })   
    </script>

</body>

</html>